<template>
    <div class="course-list">
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <el-form :inline="true" :model="form" ref="form" class="demo-form-inline" style="position: relative">
                    <el-form-item prop="courseName" label="课程名称">
                        <el-input v-model="form.courseName"></el-input>
                    </el-form-item>
                    <el-form-item prop="status" label="状态">
                        <el-select clearable v-model="form.status">
                            <el-option label="全部" value=""></el-option>
                            <el-option label="上架" value="1"></el-option>
                            <el-option label="下架" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" :disabled="isLoading" @click="onSubmit">查询</el-button>
                    </el-form-item>
                    <el-form-item style="position: absolute; right: 0">
                        <el-button @click="$router.push({name: 'course-create'})">新建课程</el-button>
                    </el-form-item>
                </el-form>
            </div>
            <el-table
            :data="course"
            style="width: 100%; margin-bottom: 20px"
            v-loading='isLoading'>
                <el-table-column
                    prop="id"
                    label="ID">
                </el-table-column>
                <el-table-column
                    prop="courseName"
                    label="课程名称">
                </el-table-column>
                <el-table-column
                    prop="price"
                    label="价格">
                </el-table-column>
                <el-table-column
                    prop="sortNum"
                    label="排序">
                </el-table-column>
                <el-table-column
                    prop="status"
                    label="状态">
                    <template slot-scope="scope">
                        <el-switch
                            v-model="scope.row.status"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            :active-value="1"
                            :inactive-value="0"
                            :disabled="scope.row.isStatusLoading"
                            @change="onStateChange(scope.row)">
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column
                    label="操作"
                    width="300px">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            type="danger">上架</el-button>
                        <el-button
                            size="mini"
                            @click="$router.push({
                                name: 'course-edit',
                                params: {
                                    courseId: scope.row.id
                                }
                            })">编辑</el-button>
                        <el-button
                            size="mini"
                            type="danger"
                            @click="$router.push({
                                name: 'course-section',
                                params: {
                                    courseId: scope.row.id
                                }
                            })">内容管理</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!--
                分页组件
                total 总记录数
                page-size 每页大小
                分页组件会自动根据 total 和 page-size 计算出一共分多少页
            -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page.sync="form.currentPage"
                :page-sizes="[5, 10, 20]"
                :page-size="form.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalCount"
                :disabled="isLoading">
            </el-pagination>
        </el-card>
    </div>
</template>

<script lang='ts'>
import Vue from 'vue'
import { getQueryCourses, changeState } from '@/services/course'

export default Vue.extend({
    name: 'CourseList',
    data () {
        return {
            form: {
                currentPage: 1,
                pageSize: 10,
                courseName: "",
                status: ''
            },
            course: [],
            totalCount: null,
            isLoading: false
        }
    },
    created () {
        this.loadCourse()
    },
    methods: {
        async loadCourse() {
            this.isLoading = true
            const { data } = await getQueryCourses(this.form)
            data.data.records.forEach((item: any) => {
                item.isStatusLoading = false
            });
            this.course = data.data.records
            this.totalCount = data.data.total
            this.isLoading = false
        },
        // 课程上下架状态
        async onStateChange (row: any) {
            row.isStatusLoading = true
            const { data } = await changeState({
                courseId: row.id,
                status: row.status
            })
            if (data.code === '000000') {
                this.$message.success(`${row.status === 1 ? '上架' : '下架'}成功`)
                row.isStatusLoading = false
            }
        },
        onSubmit () {
            this.loadCourse()
        },
        handleSizeChange(val: number) {
            this.form.pageSize = val
            this.form.currentPage = 1 // 修改要查询的页码
            this.loadCourse()
        },
        handleCurrentChange(val: number) {
            console.log(`当前页: ${val}`)
            // 请求获取对应页码的数据
            this.form.currentPage = val
            this.loadCourse()
        },
        
    }
})
</script>

<style lang="scss" scoped></style>
